/* Mask
---------------------------------------------------------------- */
.modal-mask-wrap {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  background-color: transparent;
}

/* Modal
---------------------------------------------------------------- */
.assessment-modal {
  box-sizing: border-box;
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  // margin-left: -260px;
  // transform: translateX(-50%);
  z-index: 12;
  width: 520px;
  background: #ffffff;
  border-radius: 2px;
  box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%),
              0 6px 16px 0 rgb(0 0 0 / 8%),
              0 9px 28px 8px rgb(0 0 0 / 5%);

  &:active {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
                0 8px 10px 1px rgba(0, 0, 0, 0.14),
                0 3px 14px 2px rgba(0, 0, 0, 0.12);
  }

  .modal-head {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 16px 24px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 16px;
    color: rgba(0, 0, 0, .85);
    line-height: 22px;
    font-weight: 600;

    .head-title {
      box-sizing: border-box;
      width: 100%;
      display: flex;
      align-items: center;
      line-height: 1;
      cursor: move;

      .drop-btn {
        font-size: 16px;
        color: #cccccc;
        margin-right: 10px;
      }
    }

    .modal-del {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
      width: 56px;
      height: 100%;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: none;
      text-rendering: auto;
      cursor: pointer;
    }
  }

  .modal-body {
    box-sizing: border-box;
    font-size: 14px;
    padding: 24px;
    word-break: break-word;

    &::-webkit-scrollbar {
      /* 滚动条整体样式 */
      width: 6px;
    }
    &::-webkit-scrollbar-thumb {
      /* 滚动条里面小方块 */
      border-radius: 4px;
      background: rgba(144, 147, 153, .3);
    }
    &::-webkit-scrollbar-track {
      /* 滚动条里面轨道 */
      border-radius: inherit;
      background: rgba(144, 147, 153, .12);
    }
  }

  .modal-foot {
    box-sizing: border-box;
    padding: 10px 16px;
    border-top: 1px solid #f0f0f0;
  }
}

::ng-deep .assessment-modal {
  .modal-body {
    max-height: 600px;
    overflow-y: auto;
  }

  .ant-checkbox-wrapper {
    display: flex;
    padding: 10px 0;
  }

  .ant-radio-disabled + span, .ant-checkbox-disabled + span {
    color: #303133;
  }
  .ant-checkbox-checked .ant-checkbox-inner {
    background-color: #1890ff;
    border-color: #1890ff;
  }
  .ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after {
    border-color: #ffffff;
  }
  .ant-radio-checked .ant-radio-inner {
    border-color: #1890ff !important;
  }
  .ant-radio-disabled .ant-radio-inner::after {
    background: #1890ff;
  }
}

.machine-wrap {
  box-sizing: border-box;

  [nz-radio] {
    display: block;
    line-height: 30px;
  }

  .machine-title {
    font-size: 15px;
    color: #303133;
    font-weight: bold;
    padding: 0 0 20px 7px;

    span {
      color: #606266;
      font-weight: normal;
    }
  }

  .subject-dl {
    box-sizing: border-box;
    padding-bottom: 20px;

    &:last-child {
      padding-bottom: 0;
    }

    dt {
      font-weight: 600;
      .tip-s {
        color: #FF0000;
        padding-left: 4px;
      }
    }

    dd {
      box-sizing: border-box;
      padding-top: 4px;
    }
  }
}

.foot-sum {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 16px;
}

.opne-animation {
  animation: modalopen 0.2s ease-in-out;
}

@keyframes modalopen
{
  from {
    top: 0px;
    opacity: 0;
  }
  to {
    top: 100px;
    opacity: 1;
  }
}